<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel" >
        <el-form-item class="no-warn-item" label="打印模板">
          <hey-select v-model="formModel.modelFileName" filterable clearable clcd="print_model_cd"/>
        </el-form-item>
        <el-form-item class="no-warn-item" label="车辆VIN号:" prop="routeName">
          <el-input
            v-model="formModel.vin"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button type="primary" v-if="hasPermission('print')" plain @click="exportPrintModel">打印</el-button>
            <el-button type="primary" v-if="hasPermission('preview')" plain @click="previewPrintModel">预览</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="showImage">
      <h3>打印模板预览:</h3>
      <span v-for="item of imgList" style="padding-right: 10px">
        <img :src="'data:image/jpeg;base64,'+ item" style="width:30%;height:30%;border-style: solid;border-color:#61C4D3;">
      </span>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'PrintList',
    components: {

    },
    props: {},
    data() {
      return {
        imageSrc:'',
        showImage:false,
        imgList:[],
        formModel: {
          modelFileName:'',
          vin:'',
        },
      }
    },
    computed: {

    },
    mounted() {

    },
    methods: {
      exportPrintModel() {
        if(!this.formModel.modelFileName){
          this.$message.warning('请选择一种打印模板!')
          return false
        }
        if(!this.formModel.vin){
          this.$message.warning('车辆VIN号不能为空!')
          return false
        }
        const url = '/print/print'
        const param = { ...this.formModel }
        this.post(url, param).then(res => {
          this.$info("打印任务发起成功!")
        })
      },
      previewPrintModel(){
        if(!this.formModel.modelFileName){
          this.$message.warning('请选择一种打印模板!')
          return false
        }
        if(!this.formModel.vin){
          this.$message.warning('车辆VIN号不能为空!')
          return false
        }
        const url = '/print/preview'
        const param = { ...this.formModel }
        this.post(url, param).then(res => {
          this.imgList = res
          this.showImage = true
        }).catch(error => {
          this.showImage = false
        })
      },
    }
  }
</script>


